<template>
	<view class="content">
		<view class="searchMode">
			<view class="btnGroup">
				<button class="readCardBtn" size="mini">读取身份证</button>
				<button class="readCardBtn" @click="deviceConnect()" size="mini">设备连接</button>
				<button class="handAddBtn" size="mini" @click="goStartData()">手动添加居民</button>
			</view>
			<view class="selectGroup">
				<view class="select">
					<uni-data-select :disabled="quyuDisabled" v-model="searchData.quyu" :localdata="quyuList"
						placeholder="区域" style="width: 30%;padding:0 5px;"></uni-data-select>
					<uni-data-select v-model="searchData.NL" :localdata="NLList" placeholder="年龄"
						style="width: 30%;padding:0 5px;"></uni-data-select>
				</view>
				<view class="select">
					<picker style="width: 20%;" mode="date" :value="searchData.year" fields="year"
						@change="bindDateChange">
						<view class="uni-input viewYear">{{searchData.year || '年份' }}</view>
					</picker>
					<uni-data-select :localdata="jiduList" v-model="searchData.quarter" placeholder="季度"
						style="width: 20%;padding:0 5px;"></uni-data-select>
					<uni-data-select :localdata="nianList" v-model="searchData.queryType"
						style="padding:0 5px;"></uni-data-select>
				</view>
				<view class="select">
					<input v-model="searchData.cardNo" class="uni-input" placeholder="身份证号" />
					<input v-model="searchData.name" class="uni-input" focus placeholder="姓名" />
					<input class="uni-input" placeholder="手机号" />
				</view>
				<view class="select">
					<uni-data-checkbox :multiple="true" style="margin-left: 10rpx;display: flex;align-items: center;"
						:localdata="range" v-model="searchData.GLBZ"></uni-data-checkbox>
					<button class="searchBtn" @click="selectData" size="mini">随访查询{{`(${total || 0})`}}</button>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="listMode">
			<view class="list">
				<uni-card style="margin: 0;padding: 0;" v-for="item in list" :key="item.CardNo" :is-shadow="false"
					:title="item.Name">
					<template v-slot:extra>
						<view style="display: flex;font-size: 14px;justify-content: space-around;">
							<view style="padding: 0 10rpx;" v-show="item.sex=='男'"><i style="color: #0091FF;"
									class="iconfont icon-sex_man"></i>男</view>
							<view style="padding: 0 10rpx;" v-show="item.sex=='女'"><i
									style="color: #ff007f;display: inline-block;transform: rotate(137deg);"
									class="iconfont icon-sex_woman"></i>女</view>
							<view style="padding: 0 10rpx;">{{item.Age}}岁</view>
							<view>{{item.Quyu}}</view>
						</view>
					</template>
					<view style="display: flex;">
						<view style="width: 75%">
							<view style="display: flex;">
								<view style="width: 62%;">{{item.CardNo}}</view>
								<view style="width: 38%;"><a :href="'tel:'+item.phone">{{item.phone}}</a> </view>
							</view>
							<view style="display: flex;">
								<view>{{ item.GlbzList}}</view>
							</view>
							<view></view>
						</view>
						<view style="width: 25%;">
							<button :class="item.Id != '0' ? 'green':'yellow'" size="mini"
								@click="goStart(item.Id,item)">{{item.Id != '0' ? '开始随访':'修改档案' }}</button>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
		<view class="footer">
			<button class="footBtn" @click="dialogToggle('info')">退出登录</button>
		</view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="通知" content="确认要退出登录吗？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getList,
		getQuYu
	} from '@/api/index.js'
	export default {
		data() {
			return {
				status: 'more',
				quyuDisabled: false,
				single: '',
				total: '',
				datatime: '',
				illType: [],
				searchData:{
				  pagenumber: 1,
				  pageSize: 7,
				  queryType: 3,
				},
				NLList: [{
					value: "50-59",
					text: "50-59"
				}, {
					value: "60-69",
					text: "60-69"
				}, {
					value: "70-79",
					text: "70-79"
				}, {
					value: "80-89",
					text: "80-89"
				}, {
					value: "90-99",
					text: "90-99"
				}, {
					value: "100-109",
					text: "100-109"
				}],
				range: [{
						value: "高血压",
						text: "高血压"
					},
					{
						value: "糖尿病",
						text: "糖尿病"
					},
					{
						value: "精神障碍",
						text: "精神障碍"
					},
				],
				jiduList: [{
						value: 1,
						text: '第一季度'
					},
					{
						value: 2,
						text: '第二季度'
					},
					{
						value: 3,
						text: '第三季度'
					},
					{
						value: 4,
						text: '第四季度'
					}
				],
				nianList: [{
						value: 3,
						text: '本季未随访人员'
					},
					{
						value: 4,
						text: '本年未随访人员'
					},
					{
						value: 5,
						text: '本季待随访人员'
					},
				],
				quyuList: [],
				list: [],
				Quartermap: {
					高血压: 'QuarterGXYSFCount',
					糖尿病: 'QuarterTNBSFCount',
					精神障碍: 'QuarterJSZASFCount'
				}
			}
		},
		onLoad() {
			this.datatime = new Date();
			this.searchData.year = this.datatime.getFullYear();
			uni.startPullDownRefresh()
			let month = this.datatime.getMonth() + 1
			if (month >= 1 || month <= 3) {
				this.searchData.quarter = 1
			} else if (month >= 4 || month <= 6) {
				this.searchData.quarter = 2
			} else if (month >= 7 || month <= 9) {
				this.searchData.quarter = 3
			} else if (month >= 10 || month <= 12) {
				this.searchData.quarter = 4
			}
		},
		onPullDownRefresh() {
			this.searchData = {
				pagenumber: 1,
				pageSize: 7,
				queryType: 3,
				GLBZ: ''
			}
			this.list = []
			this.searchData.pagenumber = 1
			this.getPersonList(this.searchData)
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			this.getPersonList(this.searchData)
			this.getQuYu()
		},
		onReachBottom() {
			// this.searchData.pageSize += 10
			if (this.total / this.searchData.pageSize > this.searchData.pagenumber) {
				this.searchData.pagenumber++
				this.getPersonList(this.searchData)
			}
		},
		methods: {
			// 设备连接按钮的回调
			deviceConnect() {
				uni.navigateTo({
					url: '/pages/device/index'
				});
			},
			selectData() {
				this.list = []
				this.searchData.pagenumber = 1
				this.getPersonList(this.searchData)
			},
			getPersonList(data) {
				let datas = JSON.parse(JSON.stringify(data))
				datas.GLBZ ? datas.GLBZ = datas.GLBZ.toString() : ''
				datas.year ? datas.year = Number(datas.year) : ''
				getList(datas).then(res => {
					this.total = res.totalCount
					res.data.forEach((el, i) => {
						if (this.list.find(item => item.Id == el.Id)) return
						el.GlbzList = this.getStr(el)
						this.list.push(el)
					})
				})
			},
			getStr(obj) {
				let blarr = obj.Glbz.split(',')
				let arr = blarr.map((item) => {
					return this.Quartermap[item] in obj ? `${item}:(${obj[this.Quartermap[item]]})次` : ''
				})
				return arr.join(',')
			},
			getQuYu() {
				getQuYu().then(res => {
					this.quyuList = res
					for (let i = 0; i < this.quyuList.length; i++) {
						this.quyuList[i].value = this.quyuList[i].Member
						this.quyuList[i].text = this.quyuList[i].Member
					}
					if (uni.getStorageSync('quyu')) {
						this.quyuDisabled = true
						for (let i = 0; i < this.quyuList.length; i++) {
							if (uni.getStorageSync('quyu') == this.quyuList[i].text) {
								this.quyuList = [this.quyuList[i]]
								this.searchData.quyu = this.quyuList[0].value
							}
						}
					} else {
						this.quyuDisabled = false
					}
				})
			},
			goStart(id, data) {
				if (id != '0') {
					uni.navigateTo({
						url: `/pages/start/start?data=${JSON.stringify(data)}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/health/health?data=${JSON.stringify(data)}`
					})
				}
			},
			goStartData() {
				uni.navigateTo({
					url: `/pages/health/health`
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindDateChange: function(e) {
				this.searchData.year = e.detail.value
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				uni.setStorageSync('quyu','')
				uni.setStorageSync('token','')
				uni.reLaunch({
					url: '/pages/login/index'
				})
			},
		}
	}
</script>

<style>
	.footer {
		position: fixed;
		bottom: 50rpx;
		left: 50rpx;
		z-index: 2;
	}

	.footBtn {
		width: 130rpx;
		height: 130rpx;
		border-radius: 100rpx;
		background-color: #499496;
		opacity: 0.5;
		color: white;
		font-size: 28rpx;
		padding: 25rpx;
		line-height: 40rpx;
	}

	.footBtn.clicked {
		background-color: #499496;
	}

	.content {
		padding: 0 10rpx;
	}

	a {
		text-decoration: none;
		color: #6a6a6a;
	}

	.btnGroup {
		flex-direction: row;
		justify-content: space-around;
	}

	.readCardBtn {
		margin: 5px;
		width: 30%;
		background-color: #499496;
		color: #ffffff;
		border-radius: 0
	}

	.viewYear {
		width: 70% !important;
		font-size: 18rpx;
		color: #808080;
		line-height: 28px;
	}

	.handAddBtn {
		margin: 5px;
		width: 30%;
		background-color: #55aaff;
		color: #ffffff;
		border-radius: 0
	}

	.searchBtn {
		background-color: #ffa052;
		color: #ffffff;
		margin: 5rpx 0px;
		border-radius: 0
	}

	.select {
		display: flex;
		justify-content: space-around;
		padding: 2px 5px;
	}

	.uniDataSelect {
		width: 21%;
		padding: 5px;
	}

	.line {
		border: 1px solid #55aaff;
	}

	.listMode {
		display: flex;
	}

	.list {
		width: 100%;
	}

	.uni-input {
		width: 30%;
		height: 28px;
		padding: 2px 8px;
		margin: 2px 0 2px 5px;
		border: 1px solid #eebcbe;
	}

	.loadingView {
		margin: 20rpx auto;
	}

	.green {
		width: 170rpx;
		padding: 0;
		background-color: #009316;
		color: #ffffff;
		border-radius: 0
	}

	.yellow {
		width: 170rpx;
		padding: 0;
		background-color: #ffa052;
		color: #ffffff;
		border-radius: 0
	}

	:deep(.checklist-box) {
		margin-right: 10px !important;
	}
</style>